<template>
  <PageTemplate>
    <div slot="content">
    <div class="brand" >
      <!--列表状态的切换-->
      <div v-if="listType == 1" style="cursor: pointer;float: right;margin-top: 10px;margin-right:17px;position: relative;z-index:9;">

        <div v-if="showTabs == '1'" style="display:inline-block;background-color:#f0f0f0;width:30px;height:30px;text-align:center;">
          <span  @click="triggerList('1')" style="margin-top:7px;display: inline-block;">
            <img  src="@/assets/img/list1.png" />
          </span>
        </div>

        <div v-if="showTabs == '1'" style="display:inline-block;width:30px;height:30px;text-align:center;">
          <span  @click="triggerList('2')" style="margin-top:7px;display: inline-block;">
            <img  src="@/assets/img/list4.png" />
          </span>
        </div>
      </div>

      <div v-else style="cursor: pointer;float: right;margin-top: 10px;margin-right:17px;position: relative;z-index:9;">

        <div v-if="showTabs == '1'" style="display:inline-block;width:30px;height:30px;text-align:center;" >
          <span  @click="triggerList('1')" style="margin-top:7px;display: inline-block;">
            <img  src="@/assets/img/list3.png" />
          </span>
        </div>

        <div v-if="showTabs == '1'" style="display:inline-block;background-color:#f0f0f0;width:30px;height:30px;text-align:center;" >
          <span  @click="triggerList('2')" style="margin-top:7px;display: inline-block;">
            <img  src="@/assets/img/list2.png" />
          </span>
        </div>
      </div>
    </div>
    <!-- v-bind:style="{height: containerWidth +'px'}" -->
    <div v-if="listType == 1"  class="container container-top"     >
      <!--这个一定要给 不然不会渲染 样式   千万 不要换成DIV-->
      <el-row>

        <div  style="margin-top:10px;height:auto;">
          <div class="vertical-bar" style="margin-top: -10px;height:50px;float:left;"></div>


          <!--多条件搜索-->
          <div v-if="showTabs == '1'" style="cursor: pointer;float: right;margin-right:10px;position: relative;z-index:9;">
            <el-button v-popover:paramPopover class="btn-second" id="advSearch" size="small" >{{$t('ndt.advance_search')}}</el-button>
            <el-popover width="400" trigger="click" v-model="showPopover" ref="paramPopover">
              <el-row>
                <el-col :span="6" style="padding-right: 10px;margin-top:3px;text-align: right;">
                    {{$t('ndt.task_des')}}:
                </el-col>
                <el-col :span="18">
                  <el-input class="input-small" v-model="taskDesc" size="small" ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top:15px;">
                <el-col :span="6" style="padding-right: 10px;margin-top:3px;text-align: right;">
                    {{$t('ndt.launch_man')}}:
                </el-col>
                <el-col :span="18">
                  <el-input class="input-small" size="small" v-model="launcher" ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top:15px;">
                <el-col :span="6" style="padding-right: 10px;margin-top:3px;text-align: right;">
                    {{$t('ndt.launch_time')}}:
                </el-col>
                <el-col :span="18">
                    <el-date-picker
                      class="input-small timeform"
                      v-model="launchTime"
                      size="small"
                      unlink-panels
                      type="daterange"
                      :range-separator="$t('ndt.to')"
                      :start-placeholder="$t('ndt.begin_time')"
                      :end-placeholder="$t('ndt.end_time')">
                    </el-date-picker>
                </el-col>
              </el-row>
              <el-row style="margin-top:15px;">
                <el-col :span="6">
                  &nbsp;
                </el-col>
                <el-col :span="18">
                  <el-button class="btn-default" size="small" @click="advSearch" >{{$t('cm.confirm')}}</el-button>
                  &nbsp;
                  <el-button class="btn-second" size="small" @click="resetData" >{{$t('cm.reset')}}</el-button>
                </el-col>
              </el-row>
            </el-popover>
          </div>



          <!--搜索框-->
          <div v-if="showTabs == '1'" style="float: right;margin-right:20px;position: relative;z-index:9;margin-top:-2px;">
            <!-- <el-input :placeholder="$t('ndt.originator')" v-model="keyword" style="width: 220px;height: 32px;position: relative;left: 10px;"   size="small" class="search-box"   ></el-input>
					  <el-button size="small"  style="top:2px;" @click="commonSearch" slot="append" icon="el-icon-search" class="btn-default search-btn"  ></el-button> -->
            <el-input :placeholder="$t('ndt.originator')" v-model="keyword" class="search-box"  >
              <el-button slot="append" icon="el-icon-search" @click="commonSearch"></el-button>
            </el-input>
          </div>

          <div v-if="showTabs == '1'" @click="changeTimeSort" style="cursor:default;float:right;color:#606266;margin-top:5px;margin-right:30px;position: relative;z-index:9;">
            <span >
              {{$t('ndt.date')}}
            </span>
            <span v-if="dateTime == 1">
              <img src="@/assets/img/timedown.png" />
            </span>
            <span v-else>
              <img src="@/assets/img/timeup.png" />
            </span>

          </div>

          <!-- <div style="cursor:default;float:right;margin-top:5px;margin-right:15px;position: relative;z-index:9;">
            <el-dropdown trigger="hover" @command="changeStatus">
              <span class="el-dropdown-link"  >
                <span v-html="status"> </span> <img style="top:-2px;position: relative;" src="@/assets/img/down.png" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="所有"><img style="top: 1px;position: relative;" src="../../assets/img/all.png"> {{$t('ndt.all')}}</el-dropdown-item>
                <el-dropdown-item command="超期" ><img style="top: 1px;position: relative;" src="../../assets/img/overtime.png" /> {{$t('ndt.overtime')}}</el-dropdown-item>
                <el-dropdown-item command="待完成"><img style="top: 1px;position: relative;"  src="@/assets/img/soonovertime.png" /> {{$t('ndt.need_finish')}}</el-dropdown-item>
                <el-dropdown-item command="正常"><img style="top: 1px;position: relative;"  src="@/assets/img/normal.png" /> {{$t('ndt.normal')}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div> -->

          <!-- <div style="cursor:default;float:right;margin-top:5px;margin-right:15px;position: relative;z-index:9;">
            <el-dropdown @command="changeType">
              <span class="el-dropdown-link">
                {{$t('ndt.type')}} <img style="top:-2px;position: relative;" src="@/assets/img/down.png"  />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="类型1" >类型1</el-dropdown-item>
                <el-dropdown-item command="类型2" >类型2</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div> -->

          <el-tabs v-model="showTabs" style="float:left;width:100%;margin-top:-40px;z-index:1;position: relative;" type="card">
            <el-tab-pane :label="$t('ndt.functional_management')" name="1">
              <div v-if="showTabs == '1'">
                  <need_deal_list key="1" :searchParams="searchParams" :order="dateTime"  ></need_deal_list>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('ndt.oa_need_deal')" name="2">
              <span slot="label">{{$t('ndt.oa_need_deal')}}<font aria-setsize="12px">&nbsp;&nbsp;（{{oa_num}}）</font></span>
              <div v-if="showTabs == '2'">
                  <need_aue_list key="2" :showTabs="'2'" ></need_aue_list>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('ndt.upm_need_deal')" name="3">
              <span slot="label">{{$t('ndt.upm_need_deal')}}<font setsize="12px">&nbsp;&nbsp;（{{upm_num}}）</font></span>
              <div v-if="showTabs == '3'">
                  <need_aue_list key="3" :showTabs="'3'" ></need_aue_list>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('ndt.epm_need_deal')" name="4">
              <span slot="label">{{$t('ndt.epm_need_deal')}}<font setsize="12px">&nbsp;&nbsp;（{{epm_num}}）</font></span>
              <div v-if="showTabs == '4'">
                  <need_aue_list key="4" :showTabs="'4'" ></need_aue_list>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('ndt.pbs_need_deal')" name="5">
              <span slot="label">{{$t('ndt.pbs_need_deal')}}<font setsize="12px">&nbsp;&nbsp;({{pbs_num}})</font></span>
              <div v-if="showTabs == '5'">
                  <need_aue_list key="5" :showTabs="'5'" ></need_aue_list>
              </div>
            </el-tab-pane>
            <!--暂时去掉待阅-->
            <!-- <el-tab-pane :label="$t('ndt.my_need_read')" name="2">
              <div v-if="showTabs == '2'">
                  <need_read_list key="2" ></need_read_list>
              </div>
            </el-tab-pane>    -->
          </el-tabs>
        </div>
      </el-row>
    </div>

    <div v-else-if="showTabs == '1'"  class="container">
       <need_deal_list2 ></need_deal_list2>
    </div>
    <div v-else class="container" >
      <need_aue_list :showTabs="showTabs"></need_aue_list>
      <!-- <need_read_list2></need_read_list2> -->
    </div>

  </div>
</PageTemplate>

</template>

<script>
  import need_deal_task from './js/need_deal_task'
  export default need_deal_task
</script>

